<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="/res/inspinia/css/bootstrap.min.css" rel="stylesheet">
    <link href="/res/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- bootstrap-table-->
    <link href="/res/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <!-- bootstrap-datepicker -->
    <link href="/res/inspinia/css/plugins/datapicker/datepicker3.css" rel="stylesheet">

    <link href="/res/inspinia/css/animate.css" rel="stylesheet">
    <link href="/res/inspinia/css/style.css" rel="stylesheet">

    <title>凭证</title>
</head>
<body style="background-color: white">

<div class="animated fadeInRight">
    <div class="row">
        <div class="col-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>单据列表</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col">
                            <div id="pzList_table_toolbar">
                                <form role="form" id="pzList_form" class="form-inline">
                                    <div class="form-group m-r-xs">
                                        <label for="pzList_ap" class="sr-only">会计期间</label>
                                        <select class="form-control" id="pzList_ap">
                                        </select>
                                    </div>
                                    <div class="form-group m-r-xs">
                                        <label for="pzList_applyType" class="sr-only">单据类型</label>
                                        <select class="form-control" id="pzList_applyType">
                                            <option value="spending">请示单</option>
                                            <option value="expense">报销单</option>
                                            <option value="repay">还款单</option>
                                        </select>
                                    </div>
                                    <div class="form-group m-r-xs">
                                        <label for="pzList_applyCode" class="sr-only">单据编号</label>
                                        <input type="text" class="form-control" id="pzList_applyCode"
                                               placeholder="单据编号">
                                    </div>
                                    <div class="form-group m-r-xs">
                                        <label for="pzList_key" class="sr-only">查询参数</label>
                                        <input type="text" class="form-control" id="pzList_key"
                                               placeholder="标题/申请人/经办人/部门">
                                    </div>
                                    <div class="form-group m-r-xs">
                                        <label for="pzList_moneyStart" class="sr-only">金额范图</label>
                                        <div class="input-daterange input-group">
                                            <input type="number" class="form-control" style="width: 50px"
                                                   id="pzList_moneyStart"
                                                   placeholder="最小金额">
                                            <span class="input-group-addon">至</span>
                                            <input type="number" class="form-control" id="pzList_moneyEnd"
                                                   placeholder="最大金额">
                                        </div>
                                    </div>
                                    <div class="form-group m-r-xs">
                                        <label for="pzList_applyDateStart" class="sr-only">时期范图</label>
                                        <div class="input-daterange input-group datepicker">
                                            <input type="text" class="form-control" style="width: 50px"
                                                   id="pzList_applyDateStart"
                                                   placeholder="最小日期">
                                            <span class="input-group-addon">至</span>
                                            <input type="text" class="form-control" id="pzList_applyDateEnd"
                                                   placeholder="最大日期">
                                        </div>
                                    </div>
                                    <div>
                                        <button class="btn btn-primary" type="button"
                                                onclick="pzListObj.refreshTable()">查询
                                        </button>
                                        <button class="btn btn-white" type="button"
                                                onclick="pzListObj.resetTable()">重置
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <table id="pzList_table" class="table table-striped"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Mainly scripts -->
<script src="/res/inspinia/js/jquery-3.1.1.min.js"></script>
<script src="/res/inspinia/js/popper.min.js"></script>
<script src="/res/inspinia/js/bootstrap.js"></script>
<script src="/res/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/res/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="/res/inspinia/js/inspinia.js"></script>
<script src="/res/inspinia/js/plugins/pace/pace.min.js"></script>
<!-- bootstrap-datepicker -->
<script src="/res/inspinia/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="/res/bootstrap-datepicker/locale/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- bootstrap-table -->
<script src="/res/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/res/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    $().ready(function () {
        let initYear = `[[${initYear}]]`;
        let lastYear = new Date().getFullYear() - 1;
        for (let i = lastYear; i >= initYear; i--) {
            $('#pzList_ap').append($(`<option value="${i}">${i}年</option>`));
        }
        $('.datepicker').datepicker({
            language: "zh-CN",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true
        });
        pzListObj.initTable();
    })
    const pzListObj = new Object({
        refreshTable: function () {
            $('#pzList_table').bootstrapTable("refresh");
        },
        resetTable: function () {
            $('#pzList_form')[0].reset();
            $('#pzList_table').bootstrapTable("refresh");
        },
        initTable: function () {
            $('#pzList_table').bootstrapTable({
                pagination: true,
                sidePagination: 'server',
                toolbar: "pzList_table_toolbar",
                url: '/pz/his/pzmain/list',
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                method: "post",
                queryParamsType: '',
                queryParams: function (param) {
                    let myParam = {
                        page: param.pageNumber,
                        limit: param.pageSize,
                        ap: $('#pzList_ap').val(),
                        applyType: $('#pzList_applyType').val(),
                        applyCode: $('#pzList_applyCode').val(),
                        key: $('#pzList_key').val(),
                        moneyStart: $('#pzList_moneyStart').val(),
                        moneyEnd: $('#pzList_moneyEnd').val()
                    }
                    if ($('#pzList_applyDateStart').val() != "") {
                        myParam.applyDateStart = $('#pzList_applyDateStart').val();
                    }
                    if ($('#pzList_applyDateEnd').val() != "") {
                        myParam.applyDateEnd = $('#pzList_applyDateEnd').val();
                    }
                    return myParam;
                },
                columns: [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '单据号',
                    field: 'applyCode',
                    width: 100,
                }, {
                    title: '标题',
                    field: 'title'
                }, {
                    title: '经办人',
                    field: 'agentUsers'
                }, {
                    title: '申请人',
                    field: 'applyUserName'
                }, {
                    title: '申请部门',
                    field: 'applyDeptName'
                }, {
                    title: '申请日期',
                    field: 'applyDate'
                }, {
                    title: '金额',
                    field: 'money',
                    formatter: function (value, row, index) {
                        let num = parseFloat(value).toFixed(2);
                        num = parseFloat(num)
                        num = num.toLocaleString();
                        return `¥ ${num}`;
                    }
                }, {
                    title: '经费类型',
                    field: 'spendingType',
                    formatter: function (value, row, index) {
                        let str = "";
                        switch (value) {
                            case 1:
                                str = "一般";
                                break;
                            case 2:
                                str = "出差";
                                break;
                            case 3:
                                str = "专家";
                                break;
                            case 4:
                                str = "补登";
                                break;
                            case 5:
                                str = "提现";
                                break;
                            default:
                                break
                        }
                        return str;
                    }
                }, {
                    title: '状态',
                    field: 'state',
                    formatter: function (value, row, index) {
                        let str = "";
                        switch (value) {
                            case 1:
                                str = `<span class="badge">填写申请单</span>`;
                                break;
                            case 2:
                                str = `<span class="badge">审批中</span>`;
                                break;
                            case 3:
                                str = `<span class="badge">已完成</span>`;
                                break;
                            case 4:
                                str = `<span class="badge">作废</span>`;
                                break;
                            default:
                                break
                        }
                        if (row.isExpense) {
                            str += `<span class="badge badge-primary">已报销</span>`;
                        }
                        if (row.isExistApply) {
                            str += `<span class="badge badge-info">有请示</span>`;
                        }
                        return str;
                    }
                }, {
                    title: '打印',
                    align: 'center',
                    width: 50,
                    events: pzList_operateEvents,
                    formatter: pzList_operateFormatter
                }],
                responseHandler: function (res) {
                    return {
                        total: res.data.totalCount,
                        rows: res.data.list
                    };
                },
                onDblClickRow: function (row, $element, field) {
                    window.open(`/web/pz/his/pzmain/pzDetail?ap=${row.ap}&mainId=${row.mainId}`)
                }
            });
        }
    })

    window.pzList_operateEvents = {
        'click .print': function (e, value, row, index) {

        }
    };

    function pzList_operateFormatter(value, row, index) {
        var opers = [];
        if (row.state == 3) {
            opers.push(`<a class="print text-success" title="打印" target="_blank" href="/web/pz/his/pzmain/printTicket?ap=${row.ap}&mainId=${row.mainId}">
                        <i class="fa fa-print"></i>
                    </a>`)
        }
        return opers.join('');
    }
</script>
</body>
</html>